<!-- 分享页面 -->
<template>
	<view class="page">
		<view class="back" :style="{'top': `${tabbarTop}px`,'position': 'fixed',
			'left': '30rpx'}" @click="back">
			<u-icon name="arrow-left" color="#ffffff" size="50"></u-icon>
		</view>
		<view style="height: 625rpx;width: 100%;">
			
		</view>
		<view class="notice">
			<swiper style="height: 100%;" :autoplay="true" :interval="3000" :duration="1000" :indicator-dots="false"
				:circular="true" :vertical="true">
				<swiper-item v-for="it in item.userShareLogList" :key="it.shareLogId" style="height: 100%;" class="flex align-center">
					<view class="swiper-item flex align-center">用户{{it.nickname}}成功邀请了{{it.num}}人，获得{{it.shareNum}}积分</view>
				</swiper-item>
			</swiper>
		</view>
		<view style="height: 25rpx;width: 100%;">
			
		</view>
		<view class="card flex align-center flex-column">
			<view class="car-row flex justify-between align-center">
				<view class="left flex justify-center align-start flex-column">
					<view class="tomen flex justify-center align-center flex-column">
						<view class="top">
							<text class="num">{{item.goldNum}}</text>
							<text>积分</text>
						</view>
						<view class="bom">
							当前收益
						</view>
					</view>
					
				</view>
				<view class="dashed">
					
				</view>
				<view class="left flex justify-center align-end flex-column">
					<view class="tomen flex justify-center align-center flex-column">
						<view class="top">
							<text class="num">{{item.numberOfInvitations}}</text>
							<text>人</text>
						</view>
						<view class="bom">
							累计邀请
						</view>
					</view>
				</view>
			</view>
			<view class="car-erwm flex align-center flex-column">
				<view class="box">
					<view ></view>
					<!-- <image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/gaojianghua.png" mode=""></image> -->
					<image :src="qrcode" @click="save" show-menu-by-longpress="true"></image>
				</view>
				<view class="text">
					长按保存二维码即可分享
				</view>
				<view class="btn flex align-center justify-center" @click="save0">
					保存图片
				</view>
			</view>
		</view>
		<view class="textarea">
			<view class="toptitle">
				活动规则：
			</view>
			<view class="text-item" v-for="item in goods" :key="item.id">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabbarTop: 0,
				qrcode:'',
				item:{},
				goods:[
					{
						id: 0,
						text: '1.分享链接给新用户，新用户通过扫描二维码注册登录山富职得，即可获得伯乐积分。'
					},
					{
						id: 1,
						text: '2.每新邀请一个用户，即可得10个伯乐积分，积分可兑换相应商品。'
					},
					{
						id: 2,
						text: '3.每个老用户可邀请多个新用户，邀请无上限哦~~~'
					},
					{
						id: 3,
						text: '4.本活动最终解释权归山富职得所有。'
					}
				]
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(){
				this._setTabbarTitleHeight()
				this.getQRcodeInfoDetail()
			},
			//预览分享
			save(){
				let that = this
				uni.previewImage({
				  current: that.qrcode, // 当前显示图片的http链接
				  urls: [that.qrcode] // 需要预览的图片http链接列表
				})
				
			},
			//保存图片
			save0(){
				let that = this
				 uni.getImageInfo({
				 		src: that.qrcode,
				 		success: function(image) {
				 			console.log('图片信息：', JSON.stringify(image));
				 			uni.saveImageToPhotosAlbum({
				 				filePath: image.path,
				 				success: function() {
				 					console.log('save success');
				 					uni.showToast({
				 						title: '图片保存成功',
				 						icon: 'none',
				 						duration: 2200
				 					});
				 				}
				 			});
				 		}
				 	})

			},
			//获取小程序密钥
			// async getAcc_token(){
			// 	let actoken = await this.$get('/user/getAccessToken')
			// 	// console.log(actoken.data.access_token)
			// 	this.arQurey.access_token = actoken.data.access_token
			// },
			//获取二维码和用户数据
			async getQRcodeInfoDetail(){
				let {data: info} = await this.$get('/user/usersSharePageData')
				console.log(info)
				this.item = info
				let {data: qr} = await this.$get('/user/getAccessImage')
				console.log(qr)
				this.qrcode = qr
				},
			//设置title高度
			_setTabbarTitleHeight() {
				let top = uni.getStorageSync('tabbarCapsule')
				this.tabbarTop = top.top
			},
			//返回按钮
			back(){
				uni.navigateBack({
					delta:0
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		width: 750rpx;
		height: 2041rpx;
		background-image: url('https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/%E5%88%86%E4%BA%AB%E5%A4%B4.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 0 30rpx env(safe-area-inset-bottom);
		position: relative;
		.back{
			width: 40rpx;
			height: 50rpx;
		}
		.notice {
			width: 690rpx;
			height: 56rpx;
			background: rgba(255,255,255,.3);
			border-radius: 28rpx;
			padding-left: 30rpx;
			.swiper-item {
				font-weight: bold;
				color: #333333;
				font-size: 24rpx;
			}
		}
		.card{
			width: 690rpx;
			height: 880rpx;
			background: rgba(255,255,255,.3);
			border-radius: 24rpx;
			padding: 35rpx 30rpx 0;
			.car-row{
				width: 630rpx;
				height: 155rpx;
				background: #FFFFFF !important;
				box-shadow: 0rpx 11rpx 14rpx 1rpx rgba(238, 54, 42, 0.27);
				border-radius: 40rpx 8rpx 8rpx 8rpx;
				padding: 15rpx 122rpx;
				.left{
					height: 124rpx;
					width: 192rpx;
					.tomen{
						.top{
							font-weight: Regular;
							font-size: 24rpx;
							color: #F34611;
							line-height: 1;
							margin-bottom: 19rpx;
							.num{
								font-weight: bold;
								font-size: 36rpx;
							}
						}
						.bom{
							font-weight: bold;
							font-size: 28rpx;
							color: rgba(243,70,17,0.8);
							line-height: 1;
						}
					}
				}
				.dashed{
					width: 0rpx;
					height: 124rpx;
					border-right: 1rpx dashed rgba(215,51,55,.12);
					border-left: 1rpx dashed rgba(215,51,55,.12);
				}
			}
			.car-erwm{
				margin-top: 35rpx;
				width: 478rpx;
				height: 591rpx;
				background-image: url('https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/cards.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				.box{
					width: 266rpx;
					height: 266rpx;
					margin: 74rpx auto 37rpx;
				}
				.text{
					font-weight: bold;
					color: #333333;
					font-size: 24rpx;
					line-height: 1;
				}
				.btn{
					margin-top: 79rpx;
					width: 255rpx;
					height: 68rpx;
					background: #F34611;
					border-radius: 34rpx;
					line-height: 1;
					font-weight: bold;
					color: #FFFFFF;
					font-size: 28rpx;
					box-shadow: 0rpx 10rpx 10rpx rgba(243,70,17,0.4);
				}
			}
		}
		.textarea{
			margin-top: 44rpx;
			width: 690rpx;
			.toptitle{
				font-weight: bold;
				color: #FFFFFF;
				font-size: 28rpx;
			}
			.text-item{
				margin-top: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
				font-size: 24rpx;
			}
		}
	}
</style>
